<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>用户个人信息页</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
</head>
<body>
    <!--  首页头部区域（复制index）  -->
    <div class="header header-light dark-text" th:replace="index::header">
        <div class="container">
            <nav class="navigation navigation-landscape">
                <div class="nav-header">
                    <a class="nav-brand" href="/">西华大学在校租赁</a>
                </div>
                <div class="nav-menus-wrapper">
                    <ul class="nav-menu">
                        <li><a href="/" style="font-size: 15px;">首页</a> </li>
                        <li><a href="/" style="font-size: 15px;">整租</a> </li>
                        <li><a href="/" style="font-size: 15px;">合租</a> </li>
                        <li><a href="/" style="font-size: 15px;">新闻资讯</a> </li>
                        <li><a href="/" style="font-size: 15px;">用户交流区</a> </li>
                    </ul>
                </div>
                <ul class="nav-menu nav-menu-social align-to-right">
                    <li data-toggle="modal" data-target="#login">
                        <a href="#" class="text-blue">
                            <i class="fas fa-user-circle mr-1"></i>
                            <span class="dn-lg">登录</span>
                        </a>
                    </li>
                    <li class="add-listing dark-bg">
                        <a href="#" class="theme-cl" data-toggle="modal" data-target="#signup">
                            <i class="fas fa-arrow-alt-circle-right mr-1"></i>
                            注册
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="container" style="margin-bottom: -20px; height: 695px; overflow: auto">
        <!-- 个人信息页 -->
        <section class="p-0">
            <div class="container-fluid p-0">
                <div class="row">
                    <!-- 左侧导航栏 -->
                    <div th:replace="sidebar::left"></div>

                    <!-- 右侧信息页 -->
                    <div class="col-lg-9 col-md-8 col-sm-12"  style="height:695px;overflow:auto;">
                        <div style="margin-bottom: 30px;" class="dashboard-wraper">
                            <h4>个人信息</h4>
                            <div class="frm_submit_wrap">
                                <form id="profileForm" method="post" enctype="multipart/form-data" th:action="@{/user/update}">
                                    <div class="form-row">
                                        <input type="text" name="id" hidden="hidden" th:value="${user.id}">
                                        <div class="form-group col-md-12">
                                            <label>头像</label>
                                            <div>
                                                <img th:src="@{|/assets/img/user/${(user.userHead==null || user.userHead == '')?'default-avatar.jpg':user.userHead}|}" style="height: 100px;">
                                                <input type="file" name="file" value="点击修改" style="vertical-align: bottom;">
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>账号名</label>
                                            <input type="text" class="form-control" name="username" th:value="${user.username}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>姓名</label>
                                            <input type="text" class="form-control" name="userDisplayNa" th:value="${user.userDisplayNa}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>手机号码</label>
                                            <input type="text" class="form-control" name="phone" th:value="${user.phone}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>电子邮箱</label>
                                            <input type="text" class="form-control" name="email" th:value="${user.email}" readonly="true">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>身份证号码</label>
                                            <input type="text" class="form-control" name="idCard" th:value="${user.idCard}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>性别</label>
                                            <select name="sex" class="form-control">
                                                <option value="" th:selected="${(user.sex==null || user.sex == '')?'selected':''}">保密</option>
                                                <option value="男" th:selected="${user.sex == '男'?'selected':''}">男</option>
                                                <option value="女" th:selected="${user.sex == '女'?'selected':''}">女</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>职业</label>
                                            <input type="text" class="form-control" name="job" th:value="${user.job}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>爱好</label>
                                            <input type="text" class="form-control" name="hobby" th:value="${user.hobby}">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>个人说明</label>
                                            <textarea type="text" class="form-control" name="userDesc" placeholder="快来填写个人说明，让大家更加了解你吧！" th:utext="${user.userDesc}"></textarea>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <button class="btn btn-theme bg-2" type="submit">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>

    <script>
        $(function () {
            $("#userInfo").attr("class", "active");
        })
    </script>

</body>
</html>